<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./common/react.min.js"></script>
    <script src="./common/react-dom.min.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>

</head>

<body>
    <div id="demo"></div>
    <script type="text/babel">
       var AddCount=React.createClass({
           getInitialState:function(){
               console.log('1...getInitialSate');
               return {count:1};
           },
           componentWillMount:function(){
            console.log('2...componentWillMount');
           },
           componentDidMount:function(){
               console.log('3...componentDidMount');
           },
           componentWillUpdate:function(){
               console.log('4...componentWillUpdate');
           },
           componentDidUpdate:function(){
               console.log('4...componentDidUpdate');
           },
           handleClick:function(event){
               this.setState({count:this.state.count+1})
           },

           render:function(){
               return(
                   <p>
                    {this.state.count}<br/>
                    <button onClick={this.handleClick}>Add</button>
                   </p>
               )
           }
       })

       ReactDOM.render(
           <AddCount/>,
            document.getElementById("demo")
       );
    </script>
</body>

</html>